<template>
  <div class="container">
    <div class="weui_search_bar" :class="{ 'weui_search_focusing': searchBarFocused }">
      <form class="weui_search_outer">
        <div class="weui_search_inner">
          <i class="weui_icon_search"></i>
          <input type="search" v-model="searchValue" debounce="600" @focus="goSearch" @blur="leaveSearch" class="weui_search_input" id="depart_list_search_input" placeholder="搜索" />
          <a href="javascript:;" class="weui_icon_clear" @touchend="searchValue = ''"></a>
        </div>
        <label for="depart_list_search_input" class="weui_search_text" v-show="!searchBarFocused && (searchValue === '')">
          <i class="weui_icon_search"></i>
          <span>搜索科室或医生</span>
        </label>
      </form>
      <a href="javascript:;" class="weui_search_cancel" @touchend="searchValue = ''">取消</a>
    </div>
    <div id="menu-scroll-wrapper" class="menu-scroll-wrapper" v-show="!searchBarFocused && (searchValue === '')">
      <div class="scroller">
        <ul>
          <li :class="{ 'menu-item-on': branchName === '', 'menu-item-off': branchName !== '' }">
            <a @click="showAll" href="javascript:;"><span>全部</span></a>
          </li>
          <li :class="{ 'menu-item-on': branchName === '儿童医院', 'menu-item-off': branchName !== '儿童医院' }">
            <a @click="showErTong" href="javascript:;"><span>儿童医院</span></a>
          </li>
          <li :class="{ 'menu-item-on': branchName === '妇产科医院', 'menu-item-off': branchName !== '妇产科医院' }">
            <a @click="showFuChan" href="javascript:;"><span>妇产科医院</span></a>
          </li>
          <li :class="{ 'menu-item-on': branchName === '我看过的医生', 'menu-item-off': branchName !== '我看过的医生' }">
            <a @click="showMyDoctor" href="javascript:;"><span>我看过的医生</span></a>
          </li>
          <li :class="{ 'menu-item-on': branchName === '预约记录', 'menu-item-off': branchName !== '预约记录' }">
            <a @click="showBookRecord" href="javascript:;"><span>我的预约记录</span></a>
          </li>
        </ul>
      </div>
    </div>
    <div id="list-scroll-wrapper" class="list-scroll-wrapper" :style="{ 'left': ((searchBarFocused || (searchValue !== ''))? '0': (90 + 'px')) }">
      <div class="scroller">
        <div v-show="!searchBarFocused && (searchValue === '')" class="weui_cells weui_cells_access" style="margin-top:-1px;">
          <a v-for="d in departs | filterBy branchName in 'BranchName'" @click="goToDepart(d.DepartId,d.DepartName)" class="weui_cell" href="javascript:;">
            <div class="weui_cell_hd">
              <i class="fa fa-group icon-color" style="width:20px;margin-right:5px;display:block;"></i>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <p>{{d.DepartName}}</p>
            </div>
            <div class="weui_cell_ft">
            </div>
          </a>
        </div>
        <div v-show="searchBarFocused || (searchValue !== '')">
          <div class="weui_cells_title">{{drSearchTip}}</div>
          <div class="weui_cells weui_cells_access">
            <a v-for="d in searchedDrs" @click="goToDr(d.DepartId, d.DrId, d.DepartName, d.DrName)" class="weui_cell" href="javascript:;">
              <div class="weui_cell_hd">
                <i class="fa fa-user-md fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
              </div>
              <div class="weui_cell_bd weui_cell_primary">
                <p>{{d.DrName}} <span class="am-ft-13 am-ft-gray">{{d.Sex}} {{d.Title}}</span></p>
                <p><span class="am-ft-13 am-ft-gray">{{d.DepartName}}</span></p>
              </div>
              <div class="weui_cell_ft">
              </div>
            </a>
          </div>
          <div class="weui_cells_title">{{departSearchTip}}</div>
          <div class="weui_cells weui_cells_access">
            <a v-for="d in searchedDeparts" @click="goToDepart(d.DepartId, d.DepartName)" class="weui_cell" href="javascript:;">
              <div class="weui_cell_hd">
                <i class="fa fa-group icon-color" style="width:20px;margin-right:5px;display:block;"></i>
              </div>
              <div class="weui_cell_bd weui_cell_primary">
                <p>{{d.DepartName}}</p>
              </div>
              <div class="weui_cell_ft">
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.weui_navbar_item {
  padding: 6px 0;
  color: #000;
}

.weui_bar_item_on {
  color: #FFF;
  background: #0ae;
}

.weui_tab_bd {
  padding-bottom: 34px;
}

.menu-scroll-wrapper {
  position: absolute;
  top: 44px;
  left: 0;
  width: 90px;
  bottom: 0;
  overflow: hidden;
}

.menu-scroll-wrapper ul {
  width: 100%;
  position: relative;
}

.menu-scroll-wrapper ul:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #c8c8cd;
  color: #c8c8cd;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.menu-scroll-wrapper li {
  position: relative;
}

.menu-scroll-wrapper li:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #c8c8cd;
  color: #c8c8cd;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.menu-scroll-wrapper li a {
  display: block;
  margin: 0px 5px;
  padding: 15px 0 15px 3px;
  color: #515151;
}

.menu-item-on {
  background-color: white;
}

.menu-item-on span {
  padding-left: 3px;
  border-left: 2px #0ae solid;
}

.menu-item-off:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid #c8c8cd;
  color: #c8c8cd;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

.list-scroll-wrapper {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.scroller {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}
</style>
<script>
import { iScroll as IScroll } from '../../assets/lib/iscroll4/iscroll'

export default {
  name: 'BookDeptListView',
  data: function () {
    return {
      branchName: this.$route.query.branchName,
      searchBarFocused: false,
      searchValue: '',
      departs: [],
      searchedDeparts: [],
      searchedDrs: [],
      departSearchTip: '',
      drSearchTip: ''
    }
  },
  methods: {
    showAll: function () {
      if (this.branchName !== '') {
        this.branchName = ''
        this.$router.replace({ name: 'bookDeptList', query: { branchName: '', purpose: this.purpose } })
      }
    },
    showErTong: function () {
      if (this.branchName !== '儿童医院') {
        this.branchName = '儿童医院'
        this.$router.replace({ name: 'bookDeptList', query: { branchName: '儿童医院', purpose: this.purpose } })
      }
    },
    showFuChan: function () {
      if (this.branchName !== '妇产科医院') {
        this.branchName = '妇产科医院'
        this.$router.replace({ name: 'bookDeptList', query: { branchName: '妇产科医院', purpose: this.purpose } })
      }
    },
    showMyDoctor: function () {
      if (this.branchName !== '我看过的医生') {
        this.branchName = '我看过的医生'
        this.$router.go({ name: 'visitedDoctor' })
      }
    },
    showBookRecord: function () {
      if (this.branchName !== '预约记录') {
        this.branchName = '预约记录'
        this.$router.go({ name: 'searchBookInfo' })
      }
    },
    goSearch: function () {
      this.searchBarFocused = true
    },
    leaveSearch: function () {
      this.searchBarFocused = false
    },
    goToDepart: function (departId, departName) {
      this.$router.go({ name: 'bookDoctorList', query: { deptId: departId, doctorId: -1, deptName: departName } })
    },
    goToDr: function (departId, drId, departName, drName) {
      this.$router.go({ name: 'bookDoctorSchedule', query: { deptId: departId, doctorId: drId, deptName: departName, doctorName: drName } })
    }
  },
  ready: function () {
    var self = this

    this.listIScroll = new IScroll('list-scroll-wrapper', { hScroll: false, vScroll: true, hScrollbar: false, vScrollbar: false })
    this.menuIScroll = new IScroll('menu-scroll-wrapper', { hScroll: false, vScroll: true, hScrollbar: false, vScrollbar: false })

    this.$watch('branchName', function (val) {
      this.$nextTick(function () {
        this.listIScroll.refresh()
        this.listIScroll.scrollTo(0, 0, 0)
      })
    })
    this.$watch('searchBarFocused', function (val) {
      this.$nextTick(function () {
        this.listIScroll.refresh()
        this.listIScroll.scrollTo(0, 0, 0)
      })
    })
    this.$watch('searchValue', function (val) {
      if (val === '') {
        this.searchedDeparts = []
        this.searchedDrs = []

        this.$nextTick(function () {
          this.listIScroll.refresh()
          this.listIScroll.scrollTo(0, 0, 0)
        })
      } else {
        this.$ajax.get('SearchDepartDr', 'Depart', { keyword: val, regType: 'book' }).then(function (data) {
          self.searchedDeparts = data.Departs
          self.searchedDrs = data.Drs

          if (data.Departs.length === 0 && data.Drs.length === 0) {
            self.drSearchTip = '没有找到医生或科室'
            self.departSearchTip = ''
          } else if (data.Departs.length === 0) {
            self.drSearchTip = '医生'
            self.departSearchTip = ''
          } else if (data.Drs.length === 0) {
            self.drSearchTip = ''
            self.departSearchTip = '科室'
          } else {
            self.drSearchTip = '医生'
            self.departSearchTip = '科室'
          }

          self.$nextTick(function () {
            self.listIScroll.refresh()
            self.listIScroll.scrollTo(0, 0, 0)
          })
        })
      }
    })

    this.$ajax.get('GetBookDeptList', 'Book', { branchName: '' }).then(function (data) {
      self.departs = data.Depts
      self.$nextTick(function () {
        self.listIScroll.refresh()
        self.listIScroll.scrollTo(0, 0, 0)
      })
    })
  },
  beforeDestroy: function () {
    this.listIScroll.destroy()
    this.listIScroll = null

    this.menuIScroll.destroy()
    this.menuIScroll = null
  },
  listIScroll: null,
  menuIScroll: null
}
</script>
